.banner-container{
    width: 1200px;
    height: 400px;
    /* 轮播图居中 rem表示根元素的字体大小 */
    margin: 1rem auto;
    /* 隐藏超出展示容器的内容 */
    overflow: hidden;
    position: relative;
    background-color: aquamarine;
}

.banner-container .banner-img-container{
    /* width是所有图片的宽度之和，高度与图片高度一致
    保证图片能全部存下也不浪费资源 */
    width: 6000px;
    height: 400px;
    overflow: hidden;
    position: absolute;
    /* 开启弹性盒，让图片横向排列 */
    display: flex;
    transition: transform 0.6s ease;
}

.banner-container .banner-img-container img{
    width: 100%;
    height: 100%;
}

/* 轮播图圆点样式 */
.banner-container a{
    width: 24px;
    height: 24px;
    background-color: aqua;
    position: absolute;
    bottom: 1rem;
    border-radius: 100%;
    margin: 0;
    z-index: 1;
}
.banner-container input{
    width: 24px;
    height: 24px;
    position: absolute;
    bottom: 1rem;
    margin: 0;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
}

/* 设置导航圆点偏移量（居中布局）*/
#banner-control-1,#banner-control-1 + .banner-nav-a{
    left: 30%;
}
#banner-control-2,#banner-control-2 + .banner-nav-a{
    left: 40%;
}
#banner-control-3,#banner-control-3 + .banner-nav-a{
    left: 50%;
}
#banner-control-4,#banner-control-4 + .banner-nav-a{
    left: 60%;
}
#banner-control-5,#banner-control-5 + .banner-nav-a{
    left: 70%;
}

/* 设置圆点高亮 */
/* 当input被选中时，他的兄弟级a标签高亮显示 */
input:checked+.banner-nav-a{
    background-color: #ad244f;
}

/* 设置轮播图动画 */
/* 通过input的check状态来为轮播图添加动画 */
#banner-control-1:checked~.banner-img-container{
    transform: translate(0px);
}
#banner-control-2:checked~.banner-img-container{
    transform: translate(-1200px);
}
#banner-control-3:checked~.banner-img-container{
    transform: translate(-2400px);
}
#banner-control-4:checked~.banner-img-container{
    transform: translate(-3600px);
}
#banner-control-5:checked~.banner-img-container{
    transform: translate(-4800px);
}